<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>
    <div id="app">
        <parent-component></parent-component>
      </div>
      <script>
        Vue.component('parentComponent', {
          name: 'parentComponent',
          template: `<div><p>
            <h2>{{content}}</h2>
            <child-component1 @update='handleUpdate'></child-component1>
            <child-component2 :mdata="mdata" ></child-component2>
          </p></div>`,
          data() {
            return {
              content: '我是父组件',
              mdata: '子组件2'
            }
          },
          methods: {
            handleUpdate(val) {
              this.mdata = val
            }
          }
        })
        Vue.component('childComponent1', {
          name: 'childComponent',
          template: `<div><p>
            <h2>{{content}}</h2>
            <button @click="handleClick">按钮</button>
          </p></div>`,
          data() {
            return { content: '子组件1' }
          },
          methods: {
            handleClick() {
              this.$emit('update', '我要改变子组件2')
            }
          }
        })
        Vue.component('childComponent2', {
          name: 'childComponent',
          template: `<div><p>
            <h2>{{mdata}}</h2>
          </p></div>`,
          props: {
            mdata: {
              type: String,
            }
          }
        })
    
        //根组件
        var app = new Vue({
          el: '#app',
        })
      </script>
</body>
</html>